import React, { Component } from "react";
import Navbar from "./受控组件Components/Navbar";
import Tabsbar from "./受控组件Components/Tabsbar";
import Mine from "./受控组件Components/Mine";
import Video from "./受控组件Components/Video";
import First from "./受控组件Components/First";
import "./1.css";
export default class App extends Component {
  state = {
    tabList: [
      {
        name: "首页",
        id: "1",
      },
      {
        name: "影院",
        id: "2",
      },
      {
        name: "我的",
        id: "3",
      },
    ],
    navList: [
      {
        name: "返回",
        id: "1",
      },
      {
        name: "内容",
        id: "2",
      },
      {
        name: "个人中心",
        id: "3",
      },
    ],
    current: 0,
  };
  handleEvent(index) {
    this.setState({
      current: index,
    });
  }
  isComponents() {
    if (this.state.current == 0) {
      return <First />;
    } else if (this.state.current == 1) {
      return <Video />;
    } else {
      return <Mine />;
    }
  }
  render() {
    return (
      <div className="app">
        <Navbar
          navList={this.state.navList}
          current={this.state.current}
          event={this.handleEvent.bind(this)}
        ></Navbar>
        <div className="center">{this.isComponents()}</div>
        <Tabsbar
          tabList={this.state.tabList}
          current={this.state.current}
          event={this.handleEvent.bind(this)}
        ></Tabsbar>
      </div>
    );
  }
}
